<template>
  <div id="workbench">
    <div class="workbench_header">
      <div class="workbench_ctr">
        <span class="userhead"><img src="../image/image.png" alt="" /></span>
        <div class="workbench_img">
          <ul class="workbench_text">
            <li>
              <span class="workbench_gdm">早上好,北京伊尔滑雪场,祝你有愉快的一天!
                </span>
            </li>
            <li class="workbench_sec_snow">
              <span class="workbench_snow">滑雪场|认证滑雪场</span>
            </li>
          </ul>
        </div>
        <div class="worbench_right">
          <ul class="wkb_shop">
            <li>商品</li>
            <li>待处理订单</li>
            <li>店铺浏览量</li>
          </ul>     
          
          <ol class="wkb_ctr">
            <li>31</li>
            <li>165</li>
            <li>23,288</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="center_work">
      <ul>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-document-add"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">发布商品</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-edit-outline"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">商品管理</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">在此查看商品与管理商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">20分钟前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-notebook-1"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">订单查看</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-price-tag"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">雪场信息</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-pie-chart"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">数据分析</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-pie-chart"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">店铺数据</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span
              class="el-icon-pie-chart"
              style="color: #1892ff; font-size: 20px"
            >
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">商品数据</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
        <li>
          <div class="fabusp">
            <span class="el-icon-bell" style="color: #1892ff; font-size: 20px">
            </span>
            &nbsp;&nbsp; &nbsp; &nbsp;<span style="color: #262626; font-weight: 700;">商品通知</span>
          </div>
          <div class="fbxsp">
            <span style="color: #8C8C8C;">发布一款新的商品</span>
          </div>
          <div class="sccz">
            <span style="color: #8C8C8C;">上次操作</span>
            <div class="sccz_text" style="color: #8C8C8C;">7天前</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="work_footer">
      <div class="work_footer_left">
        <div class="sxpm">
          <div class="xspm"><span>销售排名</span></div>
          <ul>
            <li>
              <span class="yuandian">1</span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;丰科万达世界嘉年华
            </li>
            <li>
              <span class="yuandian">2</span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颐和伏牛山居酒店
            </li>
            <li>
              <span class="yuandian">3</span
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伏牛山滑雪教练2小时
            </li>
            <li>
              4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颐和伏牛山居教练1小时
            </li>
            <li>
              5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020沈阳奥体冰雪卡
            </li>
            <li>
              6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颐和伏牛山居温泉门票...
            </li>
          </ul>
        </div>
      </div>
      <div class="work_footer_center"></div>
      <div class="work_footer_right">
        <div class="div_right_header">
          <div class="div_right_header_conter">
            <span class="zxsbl">总销售比例</span>
            <div class="data_right_you">
              <ul>
                <li>全部</li>
                <li>雪票</li>
                <li>教练</li>
                <li>酒店</li>
                <li>卡类</li>
              </ul>
            </div>
          </div>
          <div class="binghzunagtu">
            <bzt></bzt>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bzt from "../components/Bzt.vue";
export default {
  components: { bzt },
};
</script>
<style scoped>
  span.zxsbl {
    font-size: 18px;
    font-weight: 700;
    margin-left: 20px;
}
  .xspm{
    margin-top: 10px;
    margin-left: 20px;
    font-size: 18px;
    font-weight: 700;
  }
.binghzunagtu {
  width: 580px;
  height: 296px;
}
.data_right_you > ul > li {
  width: 60px;
  height: 32px;
  float: left;
  list-style: none;
  text-align: center;
  line-height: 32px;
  border: 0.5px solid #d9d9d9;
}
.data_right_you {
  width: 330px;
  height: 32px;

  display: inline-block;

  position: absolute;
  right: 40px;
  top: 12px;
}
.zxsbl {
  line-height: 56px;
}
.sccz_text {
  display: inline-block;
  position: absolute;
  right: 0;
}
.sccz {
  width: 248px;
  height: 20px;
  margin-left: 20px;
  position: relative;
  /* background-color: red; */
}
.fbxsp {
  width: 248px;
  height: 44px;
  /* background-color: pink; */
  margin-left: 20px;
}
.fabusp {
  width: 248px;
  height: 24px;
  background-color: #fff;
  margin-top: 20px;
  margin-left: 20px;
}
.yuandian {
  border-radius: 50%;
  background-color: #262626;
  color: #fff;
}
.sxpm > ul{
  margin-top: 25px;
}
.sxpm > ul > li {
  list-style: none;
  font-size: 15px;
  padding: 15px 0;
  margin-left: 30px;
}

.work_footer_right {
  width: 580px;
  height: 353px;
  background-color: #fff;
  display: inline-block;
  margin-left: 20px;
  overflow: hidden;
  position: relative;
}

.work_footer_center {
  width: 278px;
  height: 353px;
  background-color: #fff;
  display: inline-block;
  margin-left: 20px;
}

.work_footer_left {
  width: 278px;
  height: 353px;
  background-color: #fff;
  display: inline-block;
  overflow: hidden;
}

.work_footer {
  width: 1184px;
  height: 353px;
  /* background-color: pink; */
  margin: auto;
}

.center_work > ul > li {
  width: 296px;
  height: 152px;
  /* background-color: pink; */
  list-style: none;
  border: 1px solid #e2e2e2;
  /* display: flex; */

  /* justify-content: space-between; */
  float: left;
}

.center_work {
  width: 1192px;
  height: 304px;
  background-color: #fff;
  margin: 25px auto;
}

.workbench_img {
  display: inline-block;
}

.wkb_ctr > li {
  list-style: none;
  float: left;
  margin: 6px 28px;
  font-size: 22px;
}

.wkb_shop > li {
  list-style: none;
  float: left;
  /* width: 5px; */
  margin: 5px 23px;
  font-size: 13px;
}

.worbench_right {
  width: 304px;
  height: 64px;
  /* background-color: skyblue; */
  display: inline-block;
  margin-left: 420px;
}

.workbench_text > li {
  list-style: none;
  margin-top: 10px;
}

.workbench_text {
  display: inline-block;
}

.workbench_gdm {
  font-size: 20px;
  font-weight: 700;
}

.userhead > img {
  vertical-align: text-bottom;
}

.workbench_ctr {
  width: 1184px;
  height: 72px;
  margin-left: 24px;
  margin-top: 46px;
  /* background-color: pink; */
  /* overflow: hidden; */
}

.workbench_header {
  width: 1232px;
  height: 139px;
  background-color: #fff;
  overflow: hidden;
}
</style>>